<template>
    <div id="calendarchart">
      <div id="calendar"></div>
      <div id="calendarData"></div>
    </div>
</template>
<script>
import * as d3 from 'd3'
import {CalendarChart} from './CalendarChart'
export default {
  data () {
    return {
      date: [],
      calendarData: [],
      calendarChart: ''
    }
  },
  created () {
    this.calendarChart = new CalendarChart('calendar')
    this.date = [2000, 2004]
  },
  mounted () {
    this.getData()
  },
  methods: {
    setData () {
      let days = d3.timeDays(new Date(this.date[0], 0, 1), new Date(this.date[1], 0, 1))
      for (let i = 0; i < days.length; ++i) {
        let date = {
          date: days[i],
          value: Math.random()
        }
        this.calendarData.push(date)
      }
    },
    async getData () {
      d3.csv('./static/data/calendar.csv', csv => {
        this.calendarData = csv
        this.calendarChart.date = this.date
        this.calendarChart.data = this.calendarData
        this.calendarChart.draw()
      })
    }
  }
}
</script>
<style scoped>
#calendarchart {
  height: 100%;
  width: 100%;
}
#calendar {
  height: 70%;
  width: 100%;
}
#calendarData {
  height: 30%;
  width: 100%;
}
</style>
